<template>
  <div class="attr-nav-item">
    <CompTodoList v-model="value['data']" :max="100" :has-bt="false" @onAddItem="handleClickAdd">
      <template slot="body" slot-scope="scope">
        <div class="nav-item--wrap">
          <el-input v-model="scope.data.content" placeholder="导航名称" />
          <div class="nav-item--picker">
            <SpImagePicker v-model="scope.data.imgUrl" size="small" />
            <CompPickerLink
              :value="scope.data"
              @change="
                (e) => {
                  handleChangeGoods(e, scope.index)
                }
              "
            />
          </div>
          <div class="cell-value-tip">建议尺寸:（128px * 128px）</div>
        </div>
      </template>
    </CompTodoList>
  </div>
</template>

<script>
import Vue from 'vue'
import CompPickerLink from '../../comps/comp-pickerLink'
import CompTodoList from '../../comps/comp-todoList'
export default {
  name: 'AttrNavItem',
  components: { CompPickerLink, CompTodoList },
  props: {
    value: [Object, Array]
  },
  watch: {
    'value.pageNum':  {
      immediate:true,
      handler(newVal){
        if(this.value['data'].length>this.value.pageNum*10){
          this.value['data'] = this.value['data'].slice(0, this.value.pageNum*10)
        }else{
          for (let index = this.value['data'].length; index < this.value.pageNum*10; index++) {
            this.value['data'].push({
              content: '导航'+(index+1),
              imgUrl: ''
            })
          }
        }
      }
    }
  },
  methods: {
    handleClickAdd() {
      this.value['data'].push({
        content: '导航名称',
        imgUrl: ''
      })
    },
    handleChangeGoods(e, index) {
      Vue.set(this.value['data'], index, {
        ...this.value['data'][index],
        ...e
      })
    }
  }
}
</script>
<style lang="scss">
.attr-nav-item {
  .nav-item--picker {
    display: flex;
    margin-top: 10px;
  }
  // .cell-value-tip {
  //   position: relative;
  //   top: -12px;
  // }
}
</style>
